import React, { Component, PropTypes } from 'react';
import Echarts from 'echarts';
import { connect } from 'dva'
import {
  Input,
  Button,
  Select,
  Form,
  Modal,
  Row,
  Col,
  Icon,
  message,
} from 'antd';
import Style from './home.less';
import NumberPlay from '../../util/numberPlay';
import $ from 'jquery';
import Service from "../../service";
const FormItem = Form.Item;
const createForm = Form.create;
const Option = Select.Option;
var selectedIndex = [0, 0, 0]; /* 默认选中的地区 */
const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 18 },
};
var checked = [0, 0, 0]; /* 已选选项 */

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      loading: 'none'
    };
  }
  componentDidMount() {
    const token = localStorage.getItem('token');
    this.props.queryStatistics({ token: token });
  }
  componentWillUnmount() {
    if (this.state.timer != null) {
      clearInterval(this.state.timer);

    }
  }

  returnFun = () => {
    this.context.router.push(`/1/app/kmy`);
  }

  cityInit = () => {
    var self = this;
    nameEl = document.getElementById('citybtn');
    self.provice(0, 1, first, 1);
    // self.provice(1, 1, second, 2);
    self.provice(2, 3, third, 3);
    // self.creatList(city, first);

    if (city[selectedIndex[0]].hasOwnProperty('sub')) {
      self.provice(1, 1, second, 2);
      // self.creatList(city[selectedIndex[0]].sub, second);
    } else {
      second = [{ text: '', value: 0 }];
    }

    // if (city[selectedIndex[0]].sub[selectedIndex[1]].hasOwnProperty('sub')) {
    //   self.provice(2, 3, third, 3);
    //   // self.creatList(city[selectedIndex[0]].sub[selectedIndex[1]].sub, third);
    // } else {
    //   third = [{ text: '', value: 0 }];
    // }

    picker = new Picker({
      data: [first, second, third],
      selectedIndex: selectedIndex,
      title: '地址选择'
    });


    picker.on('picker.select', function (selectedVal, selectedIndex) {
      // console.log(first)
      // console.log(first[selectedIndex[0]])
      var text1 = first[selectedIndex[0]].text;
      var text2 = second[selectedIndex[1]].text;
      var text3 = third[selectedIndex[2]] ? third[selectedIndex[2]].text : '';
      //  执行列表搜索方法
      // console.log(text1 + ' ' + text2 + ' ' + text3)
      // console.log(self.props.form.setFieldsValue('provinceCity',text1 + ' ' + text2 + ' ' + text3));
      // $('#citybtn').val(text1 + ' ' + text2 + ' ' + text3) ;
      if (self.state.areaType == 1) {
        self.setState({
          province_id: first[selectedIndex[0]].value,
          city_id: second[selectedIndex[1]].value,
          region_id: third[selectedIndex[2]] ? third[selectedIndex[2]].value : '',
          provinceCity: text1 + text2 + text3
        })
        // self.props.form.setFieldsValue({ 'provinceCity': text1 + text2 + text3 });
      } else {
        self.setState({
          contact_province_id: first[selectedIndex[0]].value,
          contact_city_id: second[selectedIndex[1]].value,
          contact_region_id: third[selectedIndex[2]] ? third[selectedIndex[2]].value : '',
          provinceCity1: text1 + text2 + text3
        })
        // self.props.form.setFieldsValue({ 'provinceCity1': text1 + text2 + text3 });
      }
    });
    picker.on('picker.change', function (index, selectedIndex) {
      // console.log(1111)
      if (index === 0) {
        self.firstChange(index, selectedIndex);
      } else if (index === 1) {
        self.secondChange(index, selectedIndex);
      }
    })

    // nameEl.addEventListener('click', function () {
    //   picker.show();
    // });

  }

  creatList(obj, list) {
    obj.forEach(function (item, index, arr) {
      var temp = new Object();
      temp.text = item.name;
      temp.value = item.id;
      list.push(temp);
    })
  }
  firstChange(index, selectedIndex) {
    var self = this;
    second = [];
    third = [];
    checked[0] = selectedIndex;
    // var firstCity = city[selectedIndex];
    // console.log(firstCity)
    // if (firstCity.hasOwnProperty('sub')) {
    //   self.creatList(firstCity.sub, second);

    //   var secondCity = city[selectedIndex].sub[0]
    //   if (secondCity.hasOwnProperty('sub')) {
    //     self.creatList(secondCity.sub, third);
    //   } else {
    //     third = [{ text: '', value: 0 }];
    //     checked[2] = 0;
    //   }
    // } else {
    //   second = [{ text: '', value: 0 }];
    //   third = [{ text: '', value: 0 }];
    //   checked[1] = 0;
    //   checked[2] = 0;
    // }

    var firstCity = first;
    // console.log(first);
    var pid = first[selectedIndex].value;
    self.provice(pid, 1, second, 2);

    picker.refillColumn(1, second);
    picker.refillColumn(2, third);
    picker.scrollColumn(1, 0)
    picker.scrollColumn(2, 0)
  }
  secondChange(index, selectedIndex) {
    var self = this;
    third = [];
    checked[1] = selectedIndex;
    var first_index = checked[0];
    // if (city[first_index].sub[selectedIndex].hasOwnProperty('sub')) {
    //   var secondCity = city[first_index].sub[selectedIndex];
    //   self.creatList(secondCity.sub, third);
    //   picker.refillColumn(2, third);
    //   picker.scrollColumn(2, 0)
    // } else {
    //   third = [{ text: '', value: 0 }];
    //   checked[2] = 0;
    //   picker.refillColumn(2, third);
    //   picker.scrollColumn(2, 0)
    // }

    var pid = second[selectedIndex].value;
    self.provice(pid, 3, third, 4);
  }
  pickAdressShow = (type) => {
    this.setState({
      areaType: type
    })
    picker.show();
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const { Statistics, data } = this.props;
    let vehicleData = data || [];
    // console.log(data);
    // console.log(this.props);
    return (
      <div className={Style.wrap}>
        <div className={Style.headWrap}>
          <div className={Style.navTitle}>
            <span className={Style.arrow} onClick={this.returnFun}><Icon type="left" /></span>
            编辑
          </div>
        </div>
        <div className={Style.conWrap}>
          <Form className="login-form">
            <div className={Style.conItem}>

              <FormItem label='姓名:' {...formItemLayout}>
                {getFieldDecorator('realname', {
                  // initialValue: Statistics && Statistics.realname || '',
                })(
                  <Input autoComplete="realname" />
                  )}
              </FormItem>
              <FormItem label='年龄:' {...formItemLayout}>
                {getFieldDecorator('age', {
                  // initialValue: Statistics && Statistics.age || '',
                })(
                  <Input autoComplete="age" />
                  )}
              </FormItem>
              <FormItem label='所在地址:' {...formItemLayout}>

                <Input placeholder="请选择所在地址" value={this.state.provinceCity} ref='provinceCity' autoComplete="provinceCity" onFocus={this.pickAdressShow.bind(this, 1)} id='citybtn' />


              </FormItem>
              <FormItem label='详细地址' {...formItemLayout}>
                {getFieldDecorator('address', {
                  // initialValue: Statistics && Statistics.address || ''
                })(
                  <Input placeholder="请输入现居地址" autoComplete="address" />
                  )}
              </FormItem>

            </div>
            <div className={Style.conItem + ' ' + Style.mt10}>
              <h3>紧急联系人</h3>
              <FormItem
                label="姓名"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 18 }}
              >
                {getFieldDecorator('contact_realname', {
                  initialValue: ''
                })(
                  <Input value='' />
                  )}
              </FormItem>

              <FormItem
                label="联系电话"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 18 }}
                className={Style.itemfoot}
              >
                {getFieldDecorator('contact_mobile', {
                  initialValue: ''
                })(
                  <Input value='' />
                  )}
              </FormItem>
            </div>
            <div className={Style.conbtn + ' ' + Style.mt10}>
              <Form.Item>
                <Button type="primary" htmlType="submit" className="login-form-button" onClick={this.handleSubmit}>
                  提交
                </Button>
              </Form.Item>
            </div>
          </Form>
        </div>

      </div>
    )
  }
}

App.contextTypes = {
  router: React.PropTypes.object
}

function mapStateToProps(state, ownProps) {
  // console.log(state)
  return {
    data: state.vehicle.data,
    Statistics: state.myHome.Statistics,
    loading: !!state.loading.global
  }
}

function dispatchToProps(dispatch) {
  return {
    queryStatistics(payload, params) {
      dispatch({ type: 'vehicle/list', payload })
    },
    update(payload, params) {
      dispatch({ type: 'vehicle/update', payload })
    },
    receive(payload, params) {
      dispatch({ type: 'vehicle/receive', payload })
    }
  }
}
export default connect(mapStateToProps, dispatchToProps)(Form.create()(App));
